<template>
  <div class="login">
    <div class="content">
      <div class="head">后台管理系统</div>
      <div class="body">
        <div><el-input prefix-icon='el-icon-s-custom' v-model="message.Admin" placeholder="请输入账号"  type="text"></el-input></div>
        <div><el-input prefix-icon='el-icon-s-opportunity' v-model="message.password" placeholder="请输入密码" type="password" show-password></el-input></div>
        <div>
          <router-link to="/">
          <el-button type="primary" @click="send">
            登录
          </el-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      message:{
        Admin:'许嵩Cc',
        password:'123456',
        // 这个需要放在src 中,则会向服务端发送请求,则会找不到,为解决这个问题,就需要require
         img:require('../../assets/img/head.jpeg'),
         time:'2019-09-11',
        space:'上海',
      }
    }
  },
  methods: {
      send(){
   
        localStorage.setItem('message',JSON.stringify(this.message))  
     
        }
  },
};
</script>

<style scoped>
a{
  text-decoration: none;
}
.login {
  background-image: url("../../assets/img/login.jpg");
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
}
.content {
  width: 400px;
  height:300px;
  background-color: rgba(30, 109, 173, 0.7);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  padding: 10px 20px;
}
.head{
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    margin-bottom: 20px;
    color:aqua;
}
/* 修改本组件下的子组件样式，需要用到>>> */
>>>.el-input__inner{
  width: 100%;
  height: 100%;
}
.el-input{
  height: 100%;
}
.body>div{
    height: 40px;
    margin: 10px 0;
}
.body>div:last-child{
    margin-top: 20px;
    text-align: center;
}
.el-button{
  width: 100%;
}

.el-button--primary {
    color:aqua ;
    }
</style>